<template>
  <div>
    <h1>组件收藏</h1>
    <div>Tab组件</div>
    <div id="table">
         <Table stripe :columns="columns_name" :data="data"></Table>
    </div>
  </div>
    
</template>

<script>
export default{
    data(){
      return{
        data:[],
        columns_name:[
          {type:'index',key:'id'},
          {title:'Username',key:'username'},
          {title:'Password',key:'password'},
          {title:'Action',key:'action',width:150,align:'center',
            render:(h,params)=>{
              return h('div',[
                  h('Button',
                    {props:{type:'primary',size:'small'},style:{marginRight:'5px'},
                      on:{click:()=>{this.show(params.index)}}
                    },'view'
                  ),
                  h('Button', {
                      props: {
                        type: 'error',
                        size: 'small'
                      },
                      on: {
                        click: () => {
                          this.remove(params.index)
                          }
                        }
                      }, 'Delete')
                ])
            }
          }
        ],

        }
    },
    methods:{
        show (index) {
          this.$Modal.info({
            title: 'User Info',
            content: `username：${this.data2[index].username}<br>password：${this.data2[index].password}<br>`})
        },
        remove (index) {
          console.log(this.data)
          this.data.splice(index, 1);
        },
        getdata(){
          let that = this;
          this.$axios.get('/findAll')
          .then(function(response){
            if(response.data.code === 200){
              that.code = response.data.code;
              that.data = response.data.object;
              console.log(that.data);
            }
            else{
              console.log("The code is not 200!")
            }
          })
          .catch(function(err){
            console.log(err);
          })
        },
    },
    created(){
        this.getdata();
    },
}

</script>

<style>

</style>
